import { TabBar } from 'antd-mobile'
import React from 'react'
import {
  AppOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router'

const Index = () => {
  const history = useNavigate()
  const tabs = [
    {
      key: '/home/shouye',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/home/room',
      title: '附近',
      icon: < AppOutline/>,
    },
    {
      key: '/home/issue',
      title: '发现',
      icon: < AppOutline/>,
    },
    {
      key: '/home/information',
      title: '工具',
      icon: < AppOutline/>,
    },
    {
      key: '/home/my',
      title: '我的',
      icon: <AppOutline/>,
    },
    
  ]


  return (
    <>
      <TabBar onChange={ pathname => history({ pathname }) }>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  )
}

export default Index